<template>
  <Modal
      v-model="modal"
      title="拒绝代码"
      :footer-hide="true"
      @on-cancel="cancel"
      width="900">
      <Row>
        <Col>
          <Tag color="primary" v-for="item in choosedOpinionTypesLv3" :key="item.id" :name="item.opinionTypeCode" closable @on-close="closeTag">{{ item.opinionTypeName }}</Tag>
        </Col>
      </Row>
      <br>
      <div class="common-split">
          <Split v-model="split1">
              <div slot="left" class="common-split-pane">
                <!-- 左侧一级菜单 -->
                <CellGroup @on-click="clickCell">
                  <Row v-for="item in checkOpinionTypes" :key="item.opinionTypeCode">
                    <Col>
                      <Badge :count="countOpinionTypesLv1(item.opinionTypeCode)" :offset="[20,-5]">
                        <Cell  :title="item.opinionTypeName" :name="item.opinionTypeCode"  :selected="item.selected"/>
                      </Badge>
                    </Col>
                  </Row>
                </CellGroup>
              </div>
              <div slot="right" class="common-split-pane">
                <!-- 二级菜单（按照二级菜单个数分行展示） -->
                <Row v-if="checkTwoOpinionTypes && checkTwoOpinionTypes.length>0" v-for="rowNum in Math.ceil(checkTwoOpinionTypes.length/3)" :key="'rowNum'+rowNum">
                  <Col span="8" v-for="(item,index) in checkTwoOpinionTypes" :key="item.opinionTypeCode" v-if="index<rowNum*3 && index>=(rowNum-1)*3">
                    <Poptip trigger="hover" placement="right" word-wrap style="width:250px;">
                        <Button type="text">{{item.opinionTypeName}}</Button>
                        <div class="api" slot="content">
                            <!-- 三级菜单 -->
                            <CheckboxGroup v-model="choosedLv3" v-if="item.opinionTypes && item.opinionTypes.length > 0" @on-change="changeOpinionTypeLv3(item.opinionTypes)">
                                <Checkbox v-for="(item3) in item.opinionTypes" :key="item3.opinionTypeCode" :label="item3.opinionTypeCode">
                                    <span>{{item3.opinionTypeName}}</span>
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                    </Poptip>
                  </Col>
                </Row>
              </div>
          </Split>
      </div>
  </Modal>
</template>

<script>
export default {
  props: {
    menuLv1List: Array,
    data: Array,
    display: Boolean
  },
  data () {
    return {
      split1: 0.2,
      modal: false,
      checkOpinionTypes: [], // 一级菜单
      checkTwoOpinionTypes: [], // 二级菜单
      checkThreeOpinionTypes: [], // 三级菜单
      choosedLv3: [], // 选中的三级菜单选项
      lastChoosedLv3: [], // 最近一次选中的三级菜单选项
      choosedOpinionTypesLv3: [] // 选中的三级菜单对象
    }
  },
  watch: {
    display: {
      handler (newV, oldV) {
        this.modal = newV
      }
    },
    menuLv1List: {
      handler (newV, oldV) {
        this.checkOpinionTypes = newV
        this.initMenuTree()
      }
    },
    data: {
      handler (newV, oldV) {
        this.choosedLv3 = newV
        this.lastChoosedLv3 = newV
        this.renderModalData(this.choosedLv3)
        this.cancel()
      }
    }
  },
  computed: {

  },
  methods: {
    cancel () {
      this.$emit('close', this.choosedOpinionTypesLv3)
    },
    // 初始化菜单树，三级菜单保存一级菜单路径
    initMenuTree () {
      if (this.checkOpinionTypes && this.checkOpinionTypes.length > 0) {
        var vm = this
        // 一级菜单
        this.checkOpinionTypes.forEach(item => {
        // 二级菜单
          item.opinionTypes.forEach(item2 => {
          // vm.checkTwoOpinionTypes.push(item2)
          // 三级菜单
            item2.opinionTypes.forEach(item3 => {
              vm.$set(item3, 'rootNode', item.opinionTypeCode)
              vm.checkThreeOpinionTypes.push(item3)
            })
          })
        })
      }
    },
    // 一级菜单单击事件
    clickCell (name) {
      var vm = this
      this.checkOpinionTypes.forEach(item => {
        if (item.opinionTypeCode === name) {
          vm.$set(item, 'selected', true)
          vm.checkTwoOpinionTypes = item.opinionTypes
        } else {
          vm.$set(item, 'selected', false)
        }
      })
    },
    /**
     * 三级菜单选中事件
     * 入参ary：当前变更的三级菜单对象数据
     */
    changeOpinionTypeLv3 (ary) {
      var vm = this
      let lastLength = this.lastChoosedLv3.length // 上一次选择的三级菜单个数
      let length = this.choosedLv3.length // 本次选择的三级菜单个数
      let changeType = 'add' // checkbox的change事件：add=选中，del=取消
      let changedopinionTypeCode = null // 变更的三级菜单code
      if (lastLength > length) {
        changeType = 'del'
      }
      if (changeType === 'add') {
        changedopinionTypeCode = this.getChangedOpinionTypeLv3(this.choosedLv3, this.lastChoosedLv3)
      } else if (changeType === 'del') {
        changedopinionTypeCode = this.getChangedOpinionTypeLv3(this.lastChoosedLv3, this.choosedLv3)
      }
      ary.forEach(item => {
        if (item.opinionTypeCode === changedopinionTypeCode) {
          vm.updateChoosedOpinionTypesLv3(item, changeType)
        }
      })
      // 将本次的三级菜单对象复制给上次的三级菜单对象
      this.lastChoosedLv3 = this.cloneObject(this.choosedLv3)
    },
    // 比较两个数组，返回多出的元素
    getChangedOpinionTypeLv3 (ary1, ary2) {
      for (let i = 0; i < ary1.length; i++) {
        var existFlag = false
        for (let j = 0; j < ary2.length; j++) {
          if (ary1[i] === ary2[j]) {
            existFlag = true
          }
        }
        if (!existFlag) {
          return ary1[i]
        }
      }
    },
    // 更新选中的三级菜单对象数组
    updateChoosedOpinionTypesLv3 (item, type) {
      if (type === 'add') {
        this.choosedOpinionTypesLv3.push(item)
      } else if (type === 'del') {
        var index = null
        for (let i = 0; i < this.choosedOpinionTypesLv3.length; i++) {
          if (this.choosedOpinionTypesLv3[i].opinionTypeCode === item.opinionTypeCode) {
            index = i
          }
        }
        if (index >= 0) {
          this.choosedOpinionTypesLv3.splice(index, 1)
        }
      }
    },
    // 关闭选中的三级菜单标签
    closeTag (event, name) {
      var indexAry = []
      var index = null
      for (let i = 0; i < this.choosedOpinionTypesLv3.length; i++) {
        if (this.choosedOpinionTypesLv3[i].opinionTypeCode === name) {
          indexAry.push(i)
        }
      }
      // 删除三级菜单标签对应的选中的三级菜单对象数组元素
      if (indexAry.length > 0) {
        for (let i = 0; i < indexAry.length; i++) {
          this.choosedOpinionTypesLv3.splice(indexAry[i], 1)
        }
      }
      for (let i = 0; i < this.choosedLv3.length; i++) {
        if (this.choosedLv3[i] === name) {
          index = i
        }
      }
      // 删除三级菜单标签对应的选中的三级菜单
      if (index >= 0) {
        this.choosedLv3.splice(index, 1)
        this.lastChoosedLv3 = this.cloneObject(this.choosedLv3)
      }
    },
    cloneObject (obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    // 计算每个一级菜单下选中的三级菜单个数
    countOpinionTypesLv1 (OpinionTypeCodeLv1) {
      let count = 0
      for (let i = 0; i < this.choosedOpinionTypesLv3.length; i++) {
        if (this.choosedOpinionTypesLv3[i].rootNode === OpinionTypeCodeLv1) {
          count++
        }
      }
      return count
    },
    /**
      渲染菜单数据
      入参data(Array)：选中的三级菜单code
     */
    renderModalData (data) {
      if (data && data.length > 0) {
        this.choosedLv3 = this.cloneObject(data)
        this.lastChoosedLv3 = this.cloneObject(this.choosedLv3)
        for (let j = 0; j < data.length; j++) {
          for (let i = 0; i < this.checkThreeOpinionTypes.length; i++) {
            if (data[j] === this.checkThreeOpinionTypes[i].opinionTypeCode) {
              this.choosedOpinionTypesLv3.push(this.checkThreeOpinionTypes[i])
            }
          }
        }
      }
    }
  },
  created () {
    if (this.menuLv1List && this.menuLv1List.length > 0) {
      this.checkOpinionTypes = this.menuLv1List
      this.initMenuTree()
    }
    if (this.data && this.data.length > 0) {
      this.choosedLv3 = this.data
      this.lastChoosedLv3 = this.data
      this.renderModalData(this.choosedLv3)
    }
  },
  mounted () {

  },
  destroyed () {

  }
}
</script>
